<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MBTI性格测试</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: 'Helvetica Neue', sans-serif;
      background-color: #f7f0ef;
      color: #4b3832;
    }
    #pages {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      transition: transform 0.5s ease;
    }
    .page {
      width: 100%;
      height: 100%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      box-sizing: border-box;
    }
    .container {
      background: white;
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      width: 100%;
      max-width: 500px;
      text-align: center;
    }
    button {
      background-color: #d8a7b1;
      border: none;
      padding: 12px 24px;
      margin: 10px;
      border-radius: 25px;
      color: white;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    button:hover {
      background-color: #c58b9a;
    }
    .question {
      font-size: 20px;
      margin-bottom: 20px;
    }
    .options button {
      display: block;
      width: 100%;
      margin: 10px 0;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
<div id="pages">
  <!-- 首页 -->
  <div class="page" id="start">
    <div class="container">
      <h1>MBTI性格测试</h1>
      <button onclick="showPage(1)">开始测试</button>
    </div>
  </div>
  <!-- 测验页 -->
  <div class="page" id="quiz">
    <div class="container">
      <div class="question" id="question"></div>
      <div class="options" id="options"></div>
    </div>
  </div>
  <!-- 结果页 -->
  <div class="page" id="result">
    <div class="container">
      <h2>你的MBTI类型是：</h2>
      <div id="mbtiType" style="font-size:24px; margin:10px 0;"></div>
      <div id="description" style="font-size:16px;"></div>
      <button onclick="showPage(0)">再测一次</button>
      <button onclick="shareResult()">生成分享图片</button>
      <button onclick="showPage(3)">查看统计</button>
    </div>
  </div>
  <!-- 统计页 -->
  <div class="page" id="stats">
    <div class="container" style="text-align:left;">
      <h2>测试统计</h2>
      <div id="statsList" style="margin:20px 0;"></div>
      <button onclick="showPage(2)">返回结果</button>
    </div>
  </div>
</div>
<script>
const questions = [
  { q: "你更喜欢：", a: { E: "参加聚会", I: "独自看书" } },
  { q: "你更倾向于：", a: { S: "关注细节", N: "关注大局" } },
  { q: "决策时你更：", a: { T: "理性分析", F: "考虑情感" } },
  { q: "你更喜欢：", a: { J: "计划有序", P: "灵活应变" } },
  { q: "在人群中你通常：", a: { E: "主动交谈", I: "被动倾听" } },
  { q: "你更喜欢的工作方式是：", a: { S: "实践操作", N: "构思创新" } },
  { q: "遇到冲突时你：", a: { T: "就事论事", F: "顾及他人感受" } },
  { q: "你的日常安排是：", a: { J: "事先计划", P: "随机应变" } },
  { q: "社交时你感觉：", a: { E: "充满能量", I: "消耗能量" } },
  { q: "你更信任：", a: { S: "亲眼所见", N: "直觉预感" } },
  { q: "决策更依赖：", a: { T: "逻辑推理", F: "人情世故" } },
  { q: "你更喜欢的生活方式是：", a: { J: "条理清晰", P: "随性自由" } }
];
const descriptions = {
  'INTJ': '战略家，具有远见和独立思考能力。',
  'INTP': '逻辑大师，善于分析和创新。',
  'ENTJ': '指挥官，果断有组织，善于领导。',
  'ENTP': '辩论家，聪明机智，喜欢挑战常规。',
  'INFJ': '提倡者，深思熟虑，关心他人。',
  'INFP': '调停者，理想主义，富有同情心。',
  'ENFJ': '主人公，富有魅力，擅长鼓舞他人。',
  'ENFP': '竞选者，热情洋溢，富有创造力。',
  'ISTJ': '物流师，可靠实际，重视责任感。',
  'ISFJ': '守护者，忠诚周到，关心他人。',
  'ESTJ': '总经理，务实果断，擅长组织。',
  'ESFJ': '执政官，热心助人，重视传统。',
  'ISTP': '鉴赏家，冷静务实，善于应对挑战。',
  'ISFP': '探险家，安静神秘，充满好奇心。',
  'ESTP': '企业家，爱冒险，善于行动。',
  'ESFP': '表演者，充满活力，乐观开朗。'
};

let current = 0;

function showPage(index) {
  const pages = document.getElementById('pages');
  pages.style.transform = `translateY(-${index * 100}vh)`;
  current = index;
  if (index === 1) startQuiz();
  if (index === 3) renderStats();
}

function startQuiz() {
  current = 0;
  window.scores = { E:0,I:0,S:0,N:0,T:0,F:0,J:0,P:0 };
  showQuestion();
}

function showQuestion() {
  const q = questions[current];
  document.getElementById('question').innerText = q.q;
  const opts = document.getElementById('options');
  opts.innerHTML = '';
  for (const [k, v] of Object.entries(q.a)) {
    const btn = document.createElement('button');
    btn.innerText = v;
    btn.onclick = () => selectOption(k);
    opts.appendChild(btn);
  }
}

function selectOption(key) {
  window.scores[key]++;
  current++;
  if (current < questions.length) showQuestion(); else showResult();
}

function showResult() {
  showPage(2);
  const s = window.scores;
  const type = (s.E>=s.I?'E':'I') + (s.S>=s.N?'S':'N') + (s.T>=s.F?'T':'F') + (s.J>=s.P?'J':'P');
  document.getElementById('mbtiType').innerText = type;
  document.getElementById('description').innerText = descriptions[type] || '一个独特的人！';
  const stats = JSON.parse(localStorage.getItem('mbti_stats')||'{}');
  stats[type] = (stats[type]||0) + 1;
  localStorage.setItem('mbti_stats', JSON.stringify(stats));
}

function shareResult() {
  html2canvas(document.querySelector('#result')).then(canvas => {
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png');
    link.download = 'mbti_result.png';
    link.click();
  });
}

function renderStats() {
  const stats = JSON.parse(localStorage.getItem('mbti_stats')||'{}');
  const list = document.getElementById('statsList');
  list.innerHTML = '';
  for (const [t,c] of Object.entries(stats)) {
    const p = document.createElement('p'); p.innerText = `${t}: ${c}人`;
    list.appendChild(p);
  }
}
</script>
</body>
</html>